<template>

    <div class="brand-wrapper">
        <!--      查询表单 -->
        <div class="search-form">
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="产品编码">
                    <el-input placeholder="请输入产品编码" v-model="searchParams.id"></el-input>
                </el-form-item>

                <el-form :inline="true" class="demo-form-inline" size="mini">
                    <el-form-item label="产品型号">
                        <el-input placeholder="请输入产品型号" v-model="searchParams.productModel"></el-input>
                    </el-form-item>
                    <el-form-item label="选择产品分类">
                        <!--动态渲染  选择品牌-->
                        <el-select placeholder="选择产品分类" v-model="searchParams.productType">
                            <el-option v-for="(item,index) in typeList" :key="index" :label="item.typeName"
                                       :value="item.typeName"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="选择品牌">
                        <!--动态渲染  选择品牌-->
                        <el-select placeholder="选择品牌" v-model="searchParams.ProductBrand">
                            <el-option v-for="(item,index) in brandList" :key="index" :label="item.brandName"
                                       :value="item.brandName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择颜色">
                        <!--动态渲染  选择品牌-->
                        <el-select placeholder="选择颜色" v-model="searchParams.ProductColor">
                            <el-option v-for="(item,index) in colorList" :key="index" :label="item.colorName"
                                       :value="item.colorName"></el-option>
                        </el-select>
                    </el-form-item>


                    <!--        <el-form-item label="活动区域">-->
                    <el-form-item>
                        <el-button type="primary" @click="searchPage">查询</el-button>
                        <el-button type="warning" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-form>
        </div>

        <!--    操作功能 -->
        <div class="crud-box">
            <el-button type="primary" size="mini" icon="el-icon-edit"
                       @click="dialogVisible=true,formData={},selectIds=[]">新建
            </el-button>
        </div>


        <!--    表格数据-->
        <!--:tree-props="{children: 'children'
            row-key="id"
         树状结构 children-->
        <div class="data-box">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="selectChange">
                <el-table-column
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="id"
                        label="产品编码"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="productType"
                        label="产品分类"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="productBrand"
                        label="产品品牌"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="productModel"
                        label="产品型号">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="productColor"
                        label="产品颜色">
                </el-table-column>
            </el-table>

        </div>


        <!--    分页-->
        <div class="page-box">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="searchParams.pageSize"
                    :current-page="searchParams.currentPage"
                    @current-change="currentPageChange"
            >
            </el-pagination>

        </div>
    </div>
</template>
<script>

    import brand from "./index";

    export default brand;
</script>

<!--src 引用css样式-->
<style src="./index.scss" lang="scss"></style>